<template>
  <div class="out">
    <div class="left">
      <div class="left_1">
        <div><h1>可选座位为白色 已选座位为蓝色</h1></div>
      </div>
      <div class="left_2">
       <el-checkbox-group v-model="checkboxGroup1" class="checkgroup" :min="0"
    :max="5" >
        <el-checkbox-button v-for="(city) in cities" :label="city" :key="city" id="two" @change="isTrue">
          <div @click="click111(prices,city)" >{{city}}</div>
         
          </el-checkbox-button>
         </el-checkbox-group>
      </div>
    </div>
    <div class="right">
      <div class="right_1">
        <div class="right1">
          <img v-bind:src="pic" />
        </div>
        <div class="right2">
          <font size="4"> &nbsp;&nbsp;{{ title }}</font>
          <p />
          &nbsp;&nbsp;导演：{{ type }}
          <p />
          &nbsp;&nbsp;时长：{{ time }}
        </div>
        <div class="right4">
          &nbsp;&nbsp;&nbsp;影院:{{movieadd}}
          <p />
          &nbsp;&nbsp;&nbsp;影厅:{{selectAll[0].mating}}
          <p />
          &nbsp;&nbsp;&nbsp;票价:{{prices}}
          <p />
          &nbsp;&nbsp;fore:
          <p />
        </div>
      </div>
      <div class="right_2">
        &nbsp;&nbsp;<div>座位号：</div><font color="red">
          <!-- {{ datas }} -->
          <span v-for="(dd) in datas" class="sit">
              <span v-if="dd!=null">
                {{dd}}&nbsp;
              </span>
          </span>
          <p
        /></font>
        &nbsp;&nbsp;<div>总价：<font color="red">￥{{ price }}</font></div>
      </div>
      <div class="right_3"></div>
      <div class="right_4">
        <el-row>
          <el-button type="danger" @click="goOn(title,type,time,movieadd,selectAll[0].mating,prices,price,pic,num,uname,uid)">确认选座</el-button>
        </el-row>
      </div>
    </div>
    <!-- {{num}} -->
    <!-- {{selectAll}} -->
  </div>
</template>

<script >
import axios from 'axios';
var num=[];
var price=[];

// $('#checkbox1').prop('checked', false);
var datas=[];
const cityOptions = ["1"];
for (var i = 1; i <= 107; i++) {
  cityOptions[i] = i+1;
}
export default {
  name: "ArticleComment",
  data() {
    return {
      uname:'',
      uid:'',
      title: "",
      type: "",
      time: "90分钟",
      sit:[], //可能是个数组  多选框
      price:0,
      prices:"",
      checkboxGroup1: ["0"],
      cities: cityOptions,
      datas:[],
      num:[],
      pic:[],
      mid:[],
      movieadd:[],
      hall:[],
      selectAll:'',
    };
  },
  methods:{
    click111:function(prices,data){
      num++;
      this.num=num;
      price=num*prices;
      this.price=price;
      for(var i=1;i<=108;i++){
        // if(num==4){
        //   break;
        // }
          if(data==i)
          {
            datas[i]=data;
       this.datas=datas;
            alert(datas[i]);
          }
      }
      // console.log(datas);
    },
    isTrue:function(checkboxGroup1){
    //  console.log(this.checkboxGroup1.length>0);
    },
    getMovieById:function(mid){
      axios.get("api/movie/selectOne?mid="+mid).then((res)=>{
        this.title=res.data.mname;
        this.pic=res.data.mpic;
        this.type=res.data.mactor1;
        this.prices=res.data.mprice;
      });
    },
    clickmname:function(maname){
      this.movieadd=maname;
     axios.get("api/maddr/selectMname?maname="+maname).then(res=>{
         this.selectAll=res.data;
       });
      // alert(maname);
    },
    goOn:function(title,type,time,movieadd,hall,prices,price,pic,num,uname){
      alert(title);//影院名
      // alert(type);//导演
      // alert(time);//时长
      // alert(movieadd);//影院
      // alert(hall);//影厅
      // alert(prices);//单价
      // alert(price);//总价
      // alert(num);//数量
      alert(pic)
      alert(uname);
      axios.get("api/order/saveOne?mname="+title+"&maname="+movieadd+"&uname="+uname+"&mpic="+pic+"&mprice"+prices).then(res=>{
        console.log(res.data)
        if(res.data===1){
           this.$router.push({name:"order",params:{title:title,type:type,time:time,movieadd:movieadd,hall:hall,prices:prices,price:price,num:num,uname:uname}});
        }
      })
      // this.$router.push({name:"order",params:{title:title,type:type,time:time,movieadd:movieadd,hall:hall,prices:prices,price:price,num:num,uname:uname}});
    },
    // getIdByName(uname,uid){
        
    //     axios.get("api/user/getIdByName?uname="+uname).then(res=>{
    //       console.log(res.data)
    //       alert(res.data+"-----")
    //       let uid=res.data
    //     })
    //     alert(uid+".......");
    // }
  },
  mounted(){
    // alert(this.$route.params.uname)
    this.uname=this.$route.params.uname
    this.getMovieById(this.$route.params.mid);
    this.clickmname(this.$route.params.maname);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.out {
  width: 1000px;
  height: 520px;
  border: red 1px solid;
  margin: auto;
}
.left {
  width: 700px;
  height: 520px;
  border: blue 1px solid;
  float: left;
}
.right {
  width: 296px;
  height: 520px;
  border: yellowgreen 1px solid;
  float: left;
}
.left_1 {
  width: 698px;
  height: 130px;
  border: blueviolet 1px solid;
}
.left_2 {
  width: 698px;
  height: 388px;
  border: palevioletred 1px solid;
}
.right_1 {
  width: 296px;
  height: 271px;
  border: yellowgreen 1px solid;
}
.right_2 {
  width: 296px;
  height: 120px;
  border: yellowgreen 1px solid;
  text-align: left;
}
.right_3 {
  width: 296px;
  height: 40px;
  border: yellowgreen 1px solid;
  /* margin-top: 30px; */
}
.right_4 {
  width: 296px;
  height: 80px;
  border: yellowgreen 1px solid;
}
.right1 {
  width: 130px;
  height: 140px;
  float: left;
}
.right1 img {
  width: 130px;
  height: 140px;
}
.right2 {
  width: 140px;
  height: 140px;
  float: left;
}
.right4 {
  text-align: left;
}
.el-button {
  margin-top: 20px;
}
/* #two {
  background: red;
} */
.sit{
  float: left;
}
</style>
